<template lang="pug">
.dashboard-stat-wrapper
  .stat-areaBox
    .areaBox-title.head 分区统计
    hr
    .areaBox-content.body 分区数量：{{ areaCount }}
  .stat-deviceBox
    .deviceBox-head.head 设备统计
    hr
    .deviceBox-body.body(
      v-for="(item, index) of stage"
      :key="index"
      @mouseover="showCount = true") {{item.label}}：{{item.count}}个
      //- @mouseout="showCount = false"
  .stat-policeBox
    .policeBox-head.head 报警类
    hr
    .policeBox-body.body(
      v-for="(item, index) of policeFlag"
      :key="index"
      :style="`color:${iconColor[item.label].color}`") {{policeList[item.label]}}：{{item.count}}个
  transition(name='fade')
    .stat-devicecount(v-show="showCount")
      .deviceBox-head.head 设备数量
      hr
      .deviceBox-body.body(
        v-for="(item, index) of deviceStatList"
        :key="index")
        span.stat-key {{ deviceType[item.label].label }}：
        span.stat-value {{ item.count }}个
</template>

<script>
import { iconColor, deviceType } from '../../../../config/marker'
export default {
  name: 'dashboard-stat',
  props: {
    policeFlag: Array,
    stage: Array,
    deviceStatList: Array,
    areaCount: Number
  },
  data () {
    return {
      iconColor,
      deviceType,
      showCount: false,
      policeList: {
        DANGER: '红色报警',
        WARNING: '黄色预警',
        COMPLETE: '蓝色关注',
        NORMAL: '绿色正常'
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.dashboard-stat-wrapper
  // position: absolute
  // bottom: 50%
  // right: 72px
  width: 150px
  min-height: 120px
  padding: 15px
  background-color: rgba(255, 255, 255, 0.96)
  border-radius: 5px
  border: 1px solid #ccc
  box-shadow: 0px 0px 10px #dfdfdf
  z-index: 0
  .stat-deviceBox, .stat-devicecount
    margin-bottom: 20px
    .deviceBox-body
      cursor: pointer
      .stat-key
        display: inline-block
        width: 110px
        text-align-last: justify
  .stat-policeBox
    .policeBox-body
      margin-top: 5px
  hr
    margin: 5px 0
  .deviceBox-head,.policeBox-head
    color: #333
  .stat-devicecount
    width: 180px
    height: auto
    background-color: #fffffe
    position: absolute
    right: 100%
    top: 0
    border: 1px solid #ccc
    box-shadow: 0px 0px 10px #dfdfdf
    padding: 10px
.head
  font-weight: bolder
  font-size: 15px
.body
  font-size: 13px
  margin: 4px 0
.danger
  color: #e90000
.complete
  color: #3e95fa
.warning
  color: #f60
.normal
  color: #05cd00
</style>
